<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file ="../include/base.jsp"%>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css"  href="<%=basePath %>css/bootstrap.min.css"/>
	<title>凯胜项目管理系统</title>
	<style type="text/css">
		body{
			padding-top:50px;
		}
		.mywell{
			margin-top:25px;
		}
	</style>
</head>
<body class="body">
	<%@ include file = "../include/sametop.jsp" %>
	<div class="container">
		<div class="row">
			<jsp:include page="../include/sameleft.jsp">
				<jsp:param value="contact" name="tag"/>
			</jsp:include>
		<div class="span9"  style="border-radius: 3px 3px 0 0;margin-top:10px">
				 <ul class="breadcrumb" style="margin-bottom:0px;border-radius: 3px 3px 0 0;margin-top:15px">
					<li class="active" style="margin-top:13px"><i class="icon-th"></i>导入/导出联系人</li>
					<li class="active" style="float:right">
						<form id="searchForm" class="navbar-search pull-left" action="" >
					    	<input type="text" id="search" class="search-query span3" name="q" autocomplete="off" placeholder="查找联系人">					    	
					    </form>	
					</li>
				</ul>
			<div class="wall " style="margin-bottom:0px;border-radius: 3px 3px 0 0;margin-top:0px;border:1px  solid #dddddd">
					<div class="wall " style="margin-bottom:0px;border-radius: 3px 3px 0 0;margin-top:0px;border:1px  solid #dddddd">
					<div class="row" style="margin-top:0px;margin-left:30px">						 
						 	<div style="margin-top:20px;margin-left:10px">
							<div style="margin-top:15px;margin-left:20px;margin-bottom:30px">
									<span style="color:red;margin-left:390px" id="out"><a href="#home" class="btn "><i class="icon-plus  icon-white"></i>导出联系人</a></span>
									<span style="color:red;margin-left:20px" id="put"><a href="#home" class="btn " ><i class="icon-plus  icon-white"></i>导入联系人</a></span>																										
							</div>
							
							<!-- 导出联系人弹出框 -->
							<div class = "modal hide " id="mymodal1" style="width:400px;position:absolute;z-index:1">
								<div class = "modal-header">
											<input type="button" value="x" style = 'color:black' class = "close" id = "close1" data-dismiss = "modal"/>
											<h3>导出联系人</h3>
								</div>
								<div class = "modal-body" style = "height:180px;margin-top:30px">
										<div>导出的联系人将存为：</div>
										<div>
											<table class="table table-condensed" >
												<thead>
													<tr>
														<th width="5%"></th>
														<th width="10%"></th>
														<th width="20%"></th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td><div><input type="checkbox" id="check1"></div></td>
														<td>excel格式</td>
														<td><div style="display:none" id="mycheck1"><input type="text" id="excelname" value="输入导出时文件名" name="excelname"><input type="text" style="width:25px"  value=".excel"><input type="button" id="mybtn" value="确定"></div></td>
													</tr>
													<tr>
														<td><div><input type="checkbox"  id="check2" ></div></td>
														<td>svf格式</td>
														<td><div style="display:none" id="mycheck2"><input type="text"value="输入导出时文件名"><input type="text" style="width:25px" value=".svf"></div></td>
													</tr>											
												</tbody>
										</table>
									</div>	
								</div>
								<div class = "modal-footer">
									<form action="<%=basePath%>contact/outcontact.action" method="post" id="myform">
										<span></span>
										<button type="submit" class="btn btn-primary">导出</button>
										<a href="" class = "btn" data-dismiss = "modal" >取消</a>
									</form>
								</div>
							</div>
							<!-- 添加联系人弹出框 -->
							<div class = "modal hide " id="mymodal3" style="position:absolute;z-index:1">
								<div class = "modal-header">
											<input type="button" value="x" style = 'color:black' class = "close" id = "close3" data-dismiss = "modal"/>
											<h3>导出联系人</h3>
								</div>
								<div class="wall">							
										<form class="form-horizontal" action="<%=basePath%>contact/toAddcontact.action" method="post">
												<fieldset>
												<div class="control-group" style="margin-top:30px">
													<label class="control-label" for="input01">姓名</label>
													<div class="controls">
														<input type="text" class="span4" name="contact.name" id="oldname" >
														<input type="hidden" class="span4" name="contact.type"  value="person">
														
													</div>
												</div>
												<div class="control-group">
													<label class="control-label" for="input01">公司</label>
													<div class="controls">
														<input type="text" class="span4" name="contact.company" id="oldcompany" >
													</div>
												</div>
												<div class="control-group">
													<label class="control-label" for="input01">职位</label>
													<div class="controls">
														<input type="text" class="span4" name="contact.title" id="oldtitle" >
													</div>
												</div>
												<hr>
												<div style="margin-bottom:20px" class="mediv">
													<label class="control-label" for="input01">手机</label>																											
													<div class="trash">
														<input type="text" style="width:210px;margin-left:20px" name="tel" class="myphone" >
														<select class="span1" name="teltype">
															<option value="个人">个人</option>
															<option value="工作">工作</option>
															<option value="家庭">家庭</option>
															<option value="其他">其他</option>
													  	</select>
													 <span style="margin-left:5px;pading-top:5px"><a href="javaScript:;"  class="mytrash"> <i class="icon-trash"></i></a> </span> 
													</div>		
												</div>				
												<div style="margin-bottom:20px" class="mediv2">
													<label class="control-label" for="input01">邮箱</label>
													<div  class="trash">
														<input type="text" style="width:210px;margin-left:20px" name="email" id="input01" class="myemail" >
														<select style="width:85px" name="emailtype">
															<option value="163邮箱">163邮箱</option>
															<option value="139邮箱">139邮箱</option>
															<option value="qq邮箱">qq邮箱</option>
													  	</select>
													 <span style="margin-left:5px;pading-top:5px"><a href="javaScript:;"  class="mytrash"> <i class="icon-trash"></i></a></span> 
													</div>
												</div>
												<div style="margin-bottom:20px"  class="mediv3">
													<label class="control-label" for="input01">地址</label>
													<div class="trash">
														<input type="text" style="width:210px;margin-left:20px" name="address" id="input01" class="myaddress" >
														<select class="span1" name="addresstype">
															<option value="家庭">家庭</option>
															<option value="工作">工作</option>
															<option value="其他">其他</option>
														</select>
													 <span style="margin-left:5px;pading-top:5px"><a href="javaScript:;"  class="mytrash"> <i class="icon-trash"></i></a> </span> 
													</div>
												</div>
												<hr>
												<div class="control-group">
													<label class="control-label" for="input01">主页</label>
													<div class="controls">
														<input type="text" name="contact.mainpage" class="span4" name="contact.mainpage" id="oldmainpage" value="${contact.mainpage}">
														<p class="help-block">http://www.xxx.com</p>
													</div>
												</div>
												<div class="control-group">
													<div style="margin-left:115px">设置联系人可见性:</div>
													<div style="margin-left:180px;margin-top:5px"><input type="radio" name="contact.views" value="all" checked="checked" class="mylook3">对所有人可见</div>
													<div style="margin-left:180px;margin-top:5px"><input type="radio" name="contact.views" value="me" class="mylook3">仅自己可见</div>
													<div style="margin-left:180px;margin-top:5px" ><input type="radio" name="contact.views" value="meandgroup" class="mylook1">我，和这个小组可见</div>														
													<div style="margin-left:200px;margin-top:5px;display:none" class="look1">	
														<select  style="margin-left:10px;width:100px;" name="groupview">
															<option>请选择小组</option>
															<c:forEach items="${grouplist}" var="group">
																<option value="${group.name}">${group.name}</option>
															</c:forEach>
														</select>
													</div>
													<div style="margin-left:180px;margin-top:5px" ><input type="radio" name="contact.views" value="allandother" class="mylook2">我，和这些人可见</div>														
													<div style="margin-left:200px;margin-top:5px;display:none" class="look2">	
														<select  style="margin-left:10px;width:100px" name="personview">
															<option>请选择姓名</option>
															<c:forEach items="${list}" var="con">
																<option value="${con.name}">${con.name}</option>
															</c:forEach>
														</select>
													</div>
												</div>
												
											
												<div class="form-actions">
													<button type="submit" class="btn btn-primary">保存</button>
													<button class="btn" onclick="location.back()">返回</button>
											  </div>
												</fieldset>
										</form>
									</div>	
							</div>
							<!-- 导入联系人弹出框 -->
						<div class = "modal hide " id="mymodal2" style="width:400px;position:absolute;z-index:1">
								<div class = "modal-header">
											<input type="button" value="x" style = 'color:black' class = "close" id = "close2" data-dismiss = "modal"/>
											<h3>导入联系人</h3>
								</div>
								<div class = "modal-body" style = "height:180px;margin-top:30px">
										<div>请选择导入的文件:</div>
										<div style="margin-left:90px;margin-top:5px"><input  type="file" id="file"><input type="button" id="mybtn2" value="确定"></div>
										<div style="margin-left:90px;margin-top:5px;color:pink">支持导入csv(*.csv)或vcard(*.vcf)格式的文件</div>
										<div>如果遇到重复联系人：</div>
										<div style="margin-left:90px;margin-top:5px"><input  type="radio" >跳过<span style="margin-left:20px"><input  type="radio" >覆盖</span></div>
								</div>
								<div class = "modal-footer">
									<form action="<%=basePath%>contact/incontact.action" method="post" id="myform2">
										<button type="submit" class="btn btn-primary">导入</button>
										<a href="" class = "btn" data-dismiss = "modal" >取消</a>
									</form>
								</div>
							</div>
							<!-- 删除导入的联系人 -->
							<div class = "modal hide " id="mymodal4" style="width:400px;position:absolute;z-index:1">
								<div class = "modal-header">
											<input type="button" value="x" style = 'color:black' class = "close" id = "close2" data-dismiss = "modal"/>
											<h3>确定要删除此导入的联系人吗</h3>
								</div>
								<div class = "modal-body" style = "height:180px;margin-top:30px">
										<div style="margin-left:90px;margin-top:5px">确定要删除此导入的联系人吗？</div>
								</div>
								<div class = "modal-footer">
									<form action="<%=basePath%>contact/incontact.action" method="post" id="myform2">
										<button type="submit" id="delbtn" class="btn btn-primary">确定</button>
										<a href="" class = "btn" data-dismiss = "modal" >取消</a>
									</form>
								</div>
							</div>
							<!-- 页面显示 -->							
							<div>						
								<c:choose>
								<c:when test="${empty contactlist}">
									<table class="table table-striped">
										<thead>
											<tr>
												
												<th width="10%"></th>
												<th width="15%"></th>
												<th width="15%"></th>
												<th width="30%"></th>
												<th width="15%"></th>
												<th width="15%"></th>
												
											</tr>
										</thead>
										<tbody>
											<tr>
												
												<td>姓名</td>
												<td>公司</td>
												<td>职位</td>
												<td>主页</td>
												<td></td>
												<td></td>
											</tr>
										
											<c:forEach items="${list}" var="c">
												<tr>
													<td id="id1">${c.name}</td>
													<td id="id2">${c.company}</td>
													<td id="id3">${c.title}</td>
													<td id="id4">${c.mainpage}</td>
													<td><span class="addcontact"><a href="#">添加此人</a></span></td>
													<td><span class="delcontact"><a href="#">删除此人</a></span></td>
												</tr>
											</c:forEach>
										</tbody>
									</table>
								</c:when>
								<c:otherwise>
									<table class="table table-striped">
											<thead>
												<tr>
													<th width="5%"></th>
													<th width="15%"></th>
													<th width="15%"></th>
													<th width="15%"></th>
													<th width="30%"></th>
													<th width="20%"></th>
													
												</tr>
											</thead>
											<tbody>
												<tr>
													<td><input type="checkbox" id="father"></td>
													<td>姓名</td>
													<td>公司</td>
													<td>职位</td>
													<td>主页</td>
													<td></td>
												</tr>
											
												<c:forEach items="${contactlist.result }" var="contact">
													<tr>
														<td><input type="checkbox" name="son" class="son" value="${contact.id }"></td>
														<td>${contact.name}</td>
														<td>${contact.company}</td>
														<td>${contact.title}</td>
														<td>${contact.mainpage}</td>
														<td></td>
													</tr>
												</c:forEach>
											</tbody>
									</table>
								</c:otherwise>
								</c:choose>
							</div>
							<form action="<%=basePath%>contact/toAddcontact.action" method="post" id="myform3">
							</form>
					</div>				
				</div> 		
			</div>
		</div>
	</div>
	</div>
</div>
	
	<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://lib.sinaapp.com/js/bootstrap/2.0.3/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="<%=basePath %>js/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			
			//$("#myform span").empty();
			//$("#myform2 span").empty();
			//var xx=("#myform2 span").eq(1).html();
			//alert(xx);
			//导出：当全选时
			$("#father").click(function(){
				var sons = document.getElementsByName("son");
				for(var i in sons) {
					sons[i].checked = document.getElementById("father").checked;
				}
				$("#myform").append($("<input type='hidden' id='outselect'  name='outselect' value='all'>"));
			});

			//导出：当不是全部选中时
			$(".son").click(function(){
				$("#outselect").attr("value","notall");
				var yy=$(".son").attr("checked");
				if(yy=="checked"){
					var ff=$(this).attr("value");
					//alert(ff);
					$("#myform").append($("<input type='hidden'  name='selectid' value="+ff+">"));
					//alert(ff);
				}
			});
			
			//导出弹出框的弹出
			$("#out").click(function(){
				$("#mymodal1").show();
			});
			//导出弹出框里面的设置
			$("#check1").click(function(){
				 var dd=$("#check1").attr("checked");
				//alert(dd);
				 if(dd=="checked"){	
				  $("#check2").attr("checked", false);
					$("#mycheck2").hide();			 
					$("#mycheck1").show();
				 }	
			});
			$("#check2").click(function(){
				 var ee=$("#check2").attr("checked");
				//alert(ee);
				 if(ee=="checked"){
				 $("#check1").attr("checked", false);
					$("#mycheck1").hide();			 
					$("#mycheck2").show();
				 }	
			});
			//当导出弹出框被点击时文件重命名的获得
			$("#mybtn").click(function(){
				var aa=$("#excelname").val();
				//alert(aa);
				$("#myform").append($("<input type='hidden'  name='excelname' value="+aa+">"));
				//alert("haole");
			});
			//当导入文件时获取文件名
			$("#mybtn2").click(function(){
				var ss=$("#file").val();
				//alert(ss);
				$("#myform2").append($("<input type='hidden'  name='filename' value="+ss+">"));
				//alert("haole");
			});
			
			
			//添加联系人
			$(".addcontact").click(function(){
				var tt=$(this).parent().parent().children("#id1").html();
				$("#oldname").attr("value",tt);
				var nn=$(this).parent().parent().children("#id2").html();
				$("#oldcompany").attr("value",nn);
				var bb=$(this).parent().parent().children("#id3").html();
				$("#oldtitle").attr("value",bb);
				var cc=$(this).parent().parent().children("#id4").html();
				$("#oldmainpage").attr("value",cc);
				$("#mymodal3").fadeIn();
			});
			//删除导入的联系人
			$(".delcontact").click(function(){
				$(this).parent().parent().hide();
				
			});
		
			
			//当导入被点击时
			$("#put").click(function(){
				$("#mymodal2").show();
			});
		
			//对弹出框中右上方关闭框的设置
			$("#close1").click(function(){
				$("#mymodal1").hide();
			});
			$("#close2").click(function(){
				$("#mymodal2").hide();
			});
			$("#close3").click(function(){
				$("#mymodal3").hide();
			});
			/*可见性设置问题：*/
				$(".mylook1").click(function(){
					$(".look2").hide();
					$(".look1").show();
				});
				$(".mylook2").click(function(){
					$(".look1").hide();
					$(".look2").show();
				});
				$(".mylook3").click(function(){
					$(".look2").hide();
					$(".look1").hide();
				});
		
		
		
			/*添加多个电话*/
			var m = 1;
				$(".myphone").live("keyup", function(){  
					var name = $(this).val();
					//alert(name.length);
					//alert("keyup");  
					//当文本框有内容时
					if(name.length!=0 && m==1){
						$(".mediv").append($("<div class='controls' ><a href='javaScript:;' class='add' >点击添加</a></div>"));
						m=0;									
					}
					
				});
				//当添加被点击时
				$(".add").live("click",function(){
					$(".add").remove();
					m=1;
					//alert("hehe");
					$(".mediv").append($("<div class='controls' style='margin-top:5px' ><input type='text' style='width:210px'name='tel' class='myphone'><select class='span1' name='teltype'><option value='个人'>个人</option><option value='工作'>工作</option><option value='家庭'>家庭</option><option value='其他'>其他</option></select><span style='margin-left:5px;pading-top:5px'> <a href='javaScript:;'  class='mytrash' onClick='del('v')'> <i class='icon-trash'></i></a>  </span> </div>"));
				});
				
				$(".mytrash").live("click",function(){
					var r=$(this).parent().parent().attr("id");
					//alert(r);
					$(this).parent().parent().empty();				
				});
				
				
				
				/*添加多个邮箱*/
				var  b=1;
				$(".myemail").live("keyup",function(){  
					var nam = $(this).val();
					 
					//当文本框有内容时
					if(nam.length!=0 && b==1 ){
						$(".mediv2").append($("<div class='controls'><a href='javaScript:;' class='add2' >点击添加</a></div>"));
						b=0;
					}
					
				});
				
				//当添加被点击时
				$(".add2").live("click",function(){
					$(".add2").remove();
					b=1;
					$(".mediv2").append($("<div class='controls' style='margin-top:5px' ><input type='text' style='width:210px' name='email' class='myemail'><select style='width:85px;margin-left:5px' name='emailtype'><option value='163邮箱'>163邮箱</option><option value='139邮箱'>139邮箱</option><option value='qq邮箱'>qq邮箱</option></select><a href='javaScript:;'  class='mytrash'> <i class='icon-trash'></i></a> </span> </div>"));
				});
				
				
				
				/*添加多个地址*/
				var e=1;
				$(".myaddress").live("keyup",function(){  
					var nam = $(this).val();					  
					//当文本框有内容时
					if(nam.length!=0 && e==1){
						$(".mediv3").append($("<div class='controls'><a href='javaScript:;' class='add3' >点击添加</a></div>"));
						e=0;						
						}				
				});
				
				//当添加被点击时
				$(".add3").live("click",function(){
					$(".add3").remove();
					e=1;
					$(".mediv3").append($("<div class='controls' style='margin-top:5px'  id='trash'><input type='text' name='address' style='width:210px' class='myaddress'><select class='span1' name='addresstype'><option value='家庭'>家庭</option><option value='工作'>工作</option><option value='其他'>其他</option></select><span style='margin-left:5px;pading-top:5px'> <a href='javaScript:;'  class='mytrash'> <i class='icon-trash'></i></a> </span> </div>"));
				});			
				
			
	});
	</script>
</body>
</html>